<template>
    <div class="skt-loading">
        <div class="rec-list" v-for="item in 4" :key="item">
            <div class="recb-l skeleton" >
              <img src="" alt="">
            </div>
            <div class="recb-r">
              <div class="title skeleton">
                <p>犬类洁白洁牙</p>
                <p>惠</p>
              </div>            
              <p class="info skeleton">包含小型犬洗澡、美容服务我爱了呀宝</p>
              <div class="distance">
                <p class="data skeleton">￥360</p>
              </div>
              <div class="button skeleton" @click="go">
                <p>购买</p>
              </div>
            </div>
          </div>
    </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
@-webkit-keyframes skeleton-ani {
	0% {
		left: 0
	}
 
	to {
		left: 100%
	}
}
 
@keyframes skeleton-ani {
	0% {
		left: 0
	}
 
	to {
		left: 100%
	}
}
 
.skt-loading .skeleton {
	position: relative;
	overflow: hidden;
	border: none !important;
	border-radius: 2px;
	background-color: rgba(0, 0, 0, 0) !important;
	background-image: none !important;
	pointer-events: none;
}
 
.skt-loading .skeleton:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9;
	width: 100%;
	height: 100%;
	background-color: #ebf1f8;
	display: block;
	border-radius: 2px;
}
 
.skt-loading .skeleton:before {
	content: "";
	position: absolute;
	top: 0;
	width: 30%;
	height: 100%;
	background: -webkit-gradient(linear, left top, right top, color-stop(0, hsla(0, 0%, 100%, 0)), color-stop(50%, hsla(0, 0%, 100%, .3)), to(hsla(0, 0%, 100%, 0)));
	background: -o-linear-gradient(left, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0) 100%);
	background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0));
	-webkit-transform: skewX(-45deg);
	-ms-transform: skewX(-45deg);
	transform: skewX(-45deg);
	z-index: 99;
	-webkit-animation: skeleton-ani 5s ease infinite;
	animation: skeleton-ani 5s ease infinite;
	display: block;
}
.rec-list{
            display: flex;
            padding: 34px 0px;
            border-bottom: 1px solid #ececec;
            .recb-l{
                margin-right: 25px;
                width: 180px;
                height: 180px;
                border-radius: 10px;
                overflow: hidden;
                img{
                    
                    height: 100%;
                }
            }
            .recb-r{
                flex: 1;
                position: relative;
                .title{
                    display: flex;
                    align-items: center;
                    margin: 13px 0px 20px 0px;
                    p:nth-of-type(1){
                        height: 32px;
                        font-size: 32px;
                        line-height: 32px;
                        font-family: PingFangSC;
                        font-weight: 500;
                        color: #08090A;
                    }
                    p:nth-of-type(2){
                        margin-left: 11px;
                        display: inline-block;
                        width: 32px;
                        height: 32px;
                        line-height: 32px;
                        background: #FF4646;
                        border-radius: 6px;
                        font-size: 24px;
                        line-height: 32px;
                        text-align: center;
                        font-family: PingFangSC;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                    
                }              
                .info{
                    margin: 15px 0px 50px;
                    width: 361px;
                    height: 25px;
                    line-height: 25px;
                    font-size: 25px;
                    font-family: PingFangSC;
                    font-weight: 500;
                    color: #999999;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .distance{
                    display: flex;
                    align-items: center;
                    img{
                        display: block;
                        width: 20px;
                        height: 24px;
                        margin-right: 11px;
                    }
                    .data{
                        height: 24px;
                        font-size: 24px;
                        line-height: 24px;
                        font-family: PingFangSC;
                        font-weight: 600;
                        color: #FF4646;
                    }
                }
            }
            .button{
                position: absolute;
                right: 0px;
                bottom: 0px;
                width: 120px;
                height: 56px;
                background: #FCCB30;
                border-radius: 28px;
                font-size: 24px;
                line-height: 56px;
                text-align: center;
                font-family: PingFangSC;
                font-weight: 400;
                color: #3A3B3C;
            }
        }
</style>